<template>
    <div class="w-full pl-[2%] pt-10 bg-gray-100 overflow-scroll" style="background-color: var(--boxborder);">
        <div class="w-full flex h-10 mt-10">
            <div class="w-[3%]">地区:</div>
            <div v-for="item in areaChoice">
                <div class="w-20 text-center text-gray-500" :style="`${area == item.value ? 'color:#c66' : ''}`"
                    @click="area = item.value" style="cursor: pointer;"> {{
                        item.title }}
                </div>
            </div>
        </div>
        <div class="w-full flex h-10">
            <div class="w-[3%]">分类:</div>
            <div v-for="item in typeChoice">
                <div class="w-20 text-center text-gray-500" :style="`${type == item.value ? 'color:#c66' : ''}`"
                    @click="type = item.value" style="cursor: pointer;"> {{
                        item.title }}
                </div>
            </div>
        </div>
        <div class="w-full flex justify-between flex-wrap h-20">
            <div class="w-[3%] h-20">名称:</div>
            <div v-for="item in nameChoice" class="h-10 ml-4">
                <div class="w-8 text-center text-gray-500" :style="`${name == item.value ? 'color:#c66' : ''}`"
                    @click="name = item.value" style="cursor: pointer;"> {{
                        item.title }}
                </div>
            </div>
        </div>
        <div class="flex flex-wrap w-full" v-if="!pending">
            <div v-for="item in data.data.artists" class="ml-5 mb-4 text-center">
                <img src="~~/src/1.gif" :onload="onload(item.picUrl)" alt="头像" class="w-48 h-48 rounded-md"
                    @click="router.push(`/singerDetail/${item.id}`)">
                <p class="leading-8 w-44 textoverflow text-sm" :title="item.name">{{ item.name }}</p>
            </div>
        </div>
    </div>
</template>
<script setup>
import { watch, ref } from 'vue'
const router = useRouter()
const nameChoice = [
    { title: 'A', value: 'a' },
    { title: 'B', value: 'b' },
    { title: 'C', value: 'c' },
    { title: 'D', value: 'd' },
    { title: 'E', value: 'e' },
    { title: 'F', value: 'f' },
    { title: 'G', value: 'g' },
    { title: 'H', value: 'h' },
    { title: 'I', value: 'i' },
    { title: 'J', value: 'j' },
    { title: 'K', value: 'k' },
    { title: 'L', value: 'l' },
    { title: 'M', value: 'm' },
    { title: 'N', value: 'n' },
    { title: 'O', value: 'o' },
    { title: 'P', value: 'p' },
    { title: 'Q', value: 'q' },
    { title: 'R', value: 'r' },
    { title: 'S', value: 's' },
    { title: 'T', value: 't' },
    { title: 'U', value: 'u' },
    { title: 'V', value: 'v' },
    { title: 'W', value: 'w' },
    { title: 'X', value: 'x' },
    { title: 'Y', value: 'y' },
    { title: 'Z', value: 'z' },
];
const areaChoice = [
    { title: "全部", value: -1 },
    { title: "华语", value: 7 },
    { title: "欧美", value: 96 },
    { title: "日本", value: 8 },
    { title: "韩国", value: 16 },
    { title: "其他", value: 0 },
];
const typeChoice = [
    { title: "全部", value: -1 },
    { title: "男歌手", value: 1 },
    { title: "女歌手", value: 2 },
    { title: "乐队", value: 3 },
]
const area = ref(-1)
const type = ref(-1)
const name = ref('a')
const { data, pending, refresh } = await useFetch('/api/singer/findAll', { query: { name: name, area: area, type: type } })
//#region 
watch(area, (newvalue, oldvalue) => {
    if (oldvalue != newvalue) {
        refresh()
        localStorage.setItem('area', JSON.stringify(area.value))
    }
})
watch(type, (newvalue, oldvalue) => {
    if (oldvalue != newvalue) {
        refresh()
        localStorage.setItem('type', JSON.stringify(area.value))
    }
})
watch(name, (newvalue, oldvalue) => {
    if (oldvalue != newvalue) {
        refresh()
        localStorage.setItem('name', JSON.stringify(area.value))
    }
})
onMounted(() => {
    if (localStorage.getItem('area')) {
        area.value = JSON.parse(localStorage.getItem('area'))
    }
    if (localStorage.getItem('type')) {
        type.value = JSON.parse(localStorage.getItem('type'))
    }
    if (localStorage.getItem('name')) {
        name.value = JSON.parse(localStorage.getItem('name'))
    }
})
//#endregion
function onload(item) {
    return 'this.src=' + '"' + item + '";this.onload=null'
}
</script>

